{% extends 'base.html' %}
{% load static %}
{% load js %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/theme_list/theme_list.css' %}?v=3">
<link rel="stylesheet" href="{% static 'css/global/list.css' %}?v=2">
<title>Список тем</title>
{% endblock head %}

{% block content %}

<form method="post" action="{%url 'search_results_view' %}" class="filters">
    <button type="button" class="new-theme" onclick="new_theme_open()">
        Новая тема
        <svg class="new-theme-plus" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
            <path
                d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                fill="inherit"></path>
        </svg>
    </button>
    {% csrf_token %}
    <div class="filters-heading">
        <h2 class="filters-title">Фильтры</h2>
        <a href="#" class="filters-link">очистить</a>
    </div>
    <div class="filters-div">
        <button type="button" class="filters-top" onclick="filters_open(this)">
            <h3 class="filters-name">Статус темы</h3>
            <div class="filters-svg svg-hidden">
                <svg width="16" height="16" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                        fill="#5A88FF"></path>
                </svg>
            </div>
        </button>
        <div class="filters-content list-hidden">
            <ul class="filters-list">
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" name="open" class="filters-checkox" value="open">
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Свободно</p>
                    </label>
                </li>
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" name="close" class="filters-checkox" value="close">
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Занято</p>
                    </label>
                </li>
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" name="past_year" class="filters-checkox" value="past_year">
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Прошлых лет</p>
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="filters-div">
        <button type="button" class="filters-top" onclick="filters_open(this)">
            <h3 class="filters-name">Предметная область</h3>
            <div class="filters-svg svg-hidden">
                <svg width="16" height="16" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                        fill="#5A88FF"></path>
                </svg>
            </div>
        </button>
        <div class="filters-content list-hidden">
            <div class="filters-item filters-search">
                <input type="text" class="filters-input" placeholder="Поиск" onkeyup="filters_search(this)">
                <div class="filters-clear" onclick="filters_clear(this)"></div>
            </div>
            <ul class="filters-list">
                {% for subject in subjects %}
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" name="subject" class="filters-checkox" value="{{subject.name}}">
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">{{subject.name}}</p>
                    </label>
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <button type="submit" class="filters-btn">Применить</button>
</form>

<div class="themes">
    <div class="main-nav">
        <form method="POST" action="{% url 'search_results_view' %}" class="filter-form">
            {% csrf_token %}
            <div class="main-nav-top">
                <input class="search-input" type="text" placeholder="Поиск по темам" name="search_input">
                <button class="search-button">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M17.6339 15.8664L14.4607 12.6932C15.1164 11.7051 15.5001 10.522 15.5001 9.25006C15.5001 5.80378 12.6964 3 9.25006 3C5.80378 3 3 5.80378 3 9.25006C3 12.6964 5.80378 15.5001 9.25006 15.5001C10.522 15.5001 11.7051 15.1164 12.6932 14.4607L15.8664 17.6339C16.3539 18.122 17.1464 18.122 17.6339 17.6339C18.122 17.1458 18.122 16.3545 17.6339 15.8664ZM4.87502 9.25006C4.87502 6.83754 6.83754 4.87502 9.25006 4.87502C11.6626 4.87502 13.6251 6.83754 13.6251 9.25006C13.6251 11.6626 11.6626 13.6251 9.25006 13.6251C6.83754 13.6251 4.87502 11.6626 4.87502 9.25006Z"
                            fill="#5a88ff" />
                    </svg>
                </button>
            </div>
        </form>
    </div>
    {% for theme in themes %}
    <div class="theme-block"
        style="background: linear-gradient(248deg, rgb({{theme.subject_color}}) 44%, rgba({{theme.subject_color}}, 0.9) 98%);"
        id="{{theme.id}}">
        <h2 class="theme-block-title">{{ theme.subjects }}</h2>
        <div class="descr">
            <h2 class="theme-name">{{ theme.name }}</h2>
            <p class="theme-descr">{{ theme.descript }}</p>
            <button class="theme-btn">Подробнее</button>
            <div class="info">
                <a class="info-link" href="#" title="Автор темы">{{ theme.author }}</a>
                <span class="tag {{theme.class_of_tag}}">{{ theme.status }}</span>
            </div>
            <button class="theme-btn-take" onclick="window.location = '{% url 'use_theme' %}?theme_id={{theme.id}}'">Взять проект</button>
        </div>
        {% if theme.author_id == user.id or user.role == 'Администратор' %}
        <button class="edit">
            <svg height="18px" version="1.1" viewBox="0 0 18 18" width="18px" xmlns="http://www.w3.org/2000/svg"
                xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1">
                    <g fill="#000000" id="Core" transform="translate(-213.000000, -129.000000)">
                        <g id="create" transform="translate(213.000000, 129.000000)">
                            <path
                                d="M0,14.2 L0,18 L3.8,18 L14.8,6.9 L11,3.1 L0,14.2 L0,14.2 Z M17.7,4 C18.1,3.6 18.1,3 17.7,2.6 L15.4,0.3 C15,-0.1 14.4,-0.1 14,0.3 L12.2,2.1 L16,5.9 L17.7,4 L17.7,4 Z"
                                id="Shape" />
                        </g>
                    </g>
                </g>
            </svg>

        </button>
        {% endif %}
    </div>
    {% endfor %}

    <form method="POST" class="new-theme-form" action="{% url 'new_theme_create' %}">
        <input type="hidden" name="theme_id" value="0" class="theme-id">
        {% csrf_token %}
        <h2 class="new-theme-title">Создание новой темы</h2>
        <div class="new-theme-inputs">
            <input type="text" class="new-theme-input form-input" name="name_input" placeholder="Название темы"
                required />
            <div class="new-theme-textaera-div">
                <textarea class="new-theme-textarea form-input" name="descript_input" maxlength="10000" oninput="textareaScore(this)" placeholder="Описание темы"
                    required></textarea>
                <span class="new-theme-textarea-score">0/10000</span>
            </div>    
            <div class="new-theme-subjects">
                <input type="text" class="search-block-input form-input"
                    placeholder="Введите названние предметной области">
                <ul class="search-block-result-list"></ul>
                <ul class="search-block-list"></ul>
            </div>
            <input type="hidden" class="search-block-hidden-input" name="subjects_input" required>
        </div>
        <div class="new-theme-btns">
            <button class="btn new-theme-exit" onclick="new_theme_exit()" type="button">Отмена</button>
            <button class="btn new-theme-create" type="submit">Создать</button>
        </div>
    </form>

    <div class="back-form"></div>

    <script src="{% static 'js/global/search_block.js' %}?v=2"></script>
    <script src="{% static 'js/global/list.js' %}"></script>
    <script src="{% static 'js/theme_list/theme_list.js' %}?v=1"></script>

    <script>
        list_arr = {{ subjects | js}};
    </script>
    {% endblock content %}